<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <meta name="author" content="Zhang Cheng">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					msg:122,
				},
				methods:{
					show(){
						console.log('hahha')
					}
				},
				//组件创建过程中的钩子函数
				beforeCreate:function(){//生命周期函数，初始化之后，实例完全被创建之前执行
					//在beforeCreate 的生命周期函数之内，data 和 methods 都是没有初始化 的
					
				},
				created:function(){
					// 又一个生命周期函数，
					//在这个生命周期函数当中，data 和 methods 是被初始化了的
					//如果要调用methods 中的方法，或操作data的数据 最早最早应该在created 中调用
					
				},
				beforeMount(){
					//第三个生命周期函数，表示魔板已经在内存中编译好了，但是尚未把编译好的魔板渲染到DOM当中
					//在beforeMount中 DOM中的内容还不是最新加载到内存当中的，元素内容还是没有被替换的，
					//将要挂载还没有挂载
				},
				mounted(){
					//第四个生命周期函数，表示内存中的魔板已经被挂载到页面当中了，用户已经可以看到数据了
					//mounted 是实例创建期间的最后一个生命周期函数	，当执行完mounted 表示实例已经被完全创建好了
					//如果要操作某些页面上的DOM节点最早应该在mounted中进行
				},
				
				
				//组件运行阶段的生命周期函数
				//这两函数会根据data的变化，触发0 到 n 次
				beforeUpdate(){
					//这时候 界面还没有被更新
					
				},
				update(){
					//这个钩子函数执行的时候页面和数据是保持一致的。
				},
				beforeDestroy(){//当这个钩子函数被执行的时候 vue实例 就已经从运行阶段进入销毁阶段，
					//当执行beforeDestroy 的时候实例身上所有的data methods ，以及过滤器 ，都处于可用状态，此时还没有真正的执行销毁的过程
				},
				destroyed(){
					//当执行到destroyed的时候 vue实例已经真正的进入到了销毁过程此时，data methos，过滤器等都被销毁，进入不可用状态。
				}
				
			});
		</script>
	</body>
</html>